<template>
  <div class="page_myAttention">

    <com-top-nav-bar
      :topNavBarObj="topNavBarObj"
      @toGetKeywordOrDateStr="getKeyWordOrDateStr"
    />

    <div class="myAttention_list" v-if="myAttention_list.length">
      <com-my-attention v-for="(item, index) in myAttention_list" :data-item="item" :key="item.id"></com-my-attention>
      <van-pagination
        v-model="querySearchObj.pageIndex"
        :total-items="total"
        :items-per-page="querySearchObj.pageSize"
        @change="handlePaginationChange_attention"
        force-ellipses
      >
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
        <template #page="{ text }">{{ text }}</template>
      </van-pagination>
    </div>

    <van-divider style="margin-top: 80px" v-else>暂无记录</van-divider>



  </div>
</template>

<script>
  import comTopNavBar from "../../components/comTopNavBar";
  import comMyAttention from '../../components/comMyAttention';

  export default {
    name: 'myAttention',
    components: {
      comMyAttention,
      comTopNavBar,
    },
    data(){
      return {
        topNavBarObj: {
          title: '我的关注',
          searchPlaceholder: '',
          dateLabel: '我的关注',
          pathForLeft: '',
        },
        querySearchObj: {
          pageIndex: 1,
          pageSize: 10,
          keyword: '',
          folltime: '',
        },
        myAttention_list: [],
        total: 0,
      }
    },
    created() {
      this._getMyAttention(this.querySearchObj);
    },
    methods:{
      async _getMyAttention(params) {
        const res = await this.$api.job.getFollowList(params)
        if (res.code === 200) {
          this.myAttention_list = res.data.items
          this.total = res.data.count
          if (this.total == 0) this.totalType = 0
        }
      },


      handlePaginationChange_attention(val){
        console.log('翻页', val);
        // 指定页
        Object.assign(this.querySearchObj, {pageIndex: val})
        this._getMyAttention(this.querySearchObj)
      },

      getKeyWordOrDateStr(val){
        const obj = {
          pageIndex: 1,
          keyword: val.keyword,
          folltime: val.date,
        }
        Object.assign(this.querySearchObj, obj)
        this._getMyAttention(this.querySearchObj)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .page_myAttention{
    width: 100%;
    .myAttention_list{
      .myAttention_item{
        background-color: #FFFFFF;
        text-align: center;
        box-sizing: border-box;
        border-bottom: 1px solid #eee;
        line-height: 1.1em;
        padding: 16px 6px 12px 6px;
        font-size: 13px;
        .concern_item{
          display: flex;
          span {
            &:first-of-type{
              width: 5em;
              font-size: 13px;
              /* 某一项不缩放  */
              flex-shrink: 0;
            }
          }
        }
      }
    }

  }
</style>
